import React from 'react';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Typography from "@material-ui/core/Typography";

const font_size = 20;
const temp = makeStyles({
  body1Select: {
    backgroundColor: "lightgreen",
  },

  title: {
    flex: '1 1 100%',
  },

  body1NoSelect: {

  },

  body2Select: {
    backgroundColor: "lightyellow",
  },

  body2NoSelect: {

  },

  border2: {
    border: "none",
    fontSize: font_size,
    width: "30px"
  },
  border1: {
    fontSize: font_size,
    width: "30px"
  },

  border3: {
   fontSize: font_size,
    borderRight: "2px solid black",
    width: "30px"

  }
});


const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
    fontSize: font_size,
  },
  body: {
    backgroundColor: (props) =>  props.backgroundColor,
    fontSize: font_size,
  },
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.action.hover,
    },
  },
}))(TableRow);


const useStyles = makeStyles({
  table: {
    // minWidth: "100px",
    // // display: "flex",
    width: "auto",
    margin: "auto",
    boxShadow: "none"
  },
});

export default function TempArray(props) {
  const classes = useStyles();

  const mod = temp();
  const judgeColor = (x) => {
    console.log("now: ", x);
    return x === "null" ? mod.body1NoSelect: mod.body1Select;
  }
    let rows = [...props.listRes];

    if (props.reset) {
      return "";
    }

    return (

    <TableContainer
        // id = {props.tableId}
        component={Paper}
        style={{width: "auto",
    margin: "auto",
    boxShadow: "none"}}
        className={classes.table}
    >

      <Table className={classes.table} aria-label="customized table" >

        <TableBody>
              <StyledTableRow key={rows[0]}>

                 {rows.map((x, i)=>(<StyledTableCell
                     className={`${mod.border2} ${judgeColor(x)}`
                 }  align={"center" }>{x}</StyledTableCell>))}
            </StyledTableRow>

        </TableBody>
      </Table>
    </TableContainer>

  );


}
